<template>
  <div>
    <QueryBar
      v-if="showQueryBar"
      :queryForm="queryForm"
      :queryConfig="queryBar"
      :btnList="queryBtn"
      :btnLine="btnLine"
      @handleQueryClick="handleQueryClick"
    />
    <el-table :border="border" :columns="tableColumns" :data="tableData" ref="tableRef">
      <el-table-column type="index" label="序号" width="50">
        <template slot-scope="scope">{{10>(scope.$index+1)?'0'+(scope.$index+1):scope.$index+1}}</template>
      </el-table-column>
      <el-table-column
        v-for="(item, index) in tableColumns"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
      >
        <!-- // 表格内容 -->
        <template slot-scope="scope">
          <div v-if="item.prop!='options'">
            <span v-if="item.formatter">
              <span v-if="item.formatter=='status'">{{item.list[scope.row[item.prop]-1]}}</span>
              <span v-if="item.formatter=='time'">{{scope.row[item.prop] |formatTime}}</span>
              <span v-if="item.formatter=='date'">{{scope.row[item.prop] |formatDate}}</span>
            </span>
            <span v-else>{{scope.row[item.prop]}}</span>
          </div>

          <div v-else>
            <el-tag
              @click="handleOptions(tag.key,scope.$index)"
              size="medium"
              v-for="(tag,i) in item.list"
              :key="i"
              style="margin: 0 5px 0 0;cursor: pointer;"
              :style="{'margin-top':i>1?'10px':''}"
            >{{tag.name}}</el-tag>
          </div>
        </template>
        <!-- // 表格操作 -->
        <!-- <template slot-scope="scope" v-if="item.prop=='options'">
            
        </template>-->
      </el-table-column>
    </el-table>
    <div style="margin-top:50px">
      <el-pagination
        v-if="pagination"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :current-page="current"
        :page-sizes="pageSizeOpts"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import QueryBar from "./QueryBar";
export default {
  components: { QueryBar },
  data() {
    return {
      currentRow: "",
    };
  },
  props: {
    // 查询栏配置
    queryForm: {
      type: Object,
      default: () => {},
    },
    queryBar: {
      type: Array,
      default: () => [],
    },
    queryBtn: {
      type: Array,
      default: () => [
        { type: "search", label: "查询" },
        { type: "reset", label: "重置" },
      ],
    },
    btnLine: {
      type: Boolean,
      default: false,
    },
    showQueryBar: {
      type: Boolean,
      default: false,
    },
    //  表格配置
    pagination: {
      type: Boolean,
      default: true,
    },
    total: Number,
    current: {
      type: Number,
      default: 1,
    },
    border: {
      type: Boolean,
      default: false,
    },
    pageSizeOpts: {
      type: Array,
      default: () => [10, 20, 30, 40],
    },
    tableColumns: {
      type: Array,
      // default: ()=>[]
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    exportExcel: {
      type: Boolean,
      default: false,
    },
  },
  filters: {
    // 1系统管理 模块
    // 2客户管理
    // 3销售管理
    // 4财务管理
    // 5系统设置
    // 6数据统计
    // 7售后服务
    // 8代理商
    // 9门店
    setSlotItem: (val) => {
      switch (val) {
        case 1:
          return "处理";
          break;
        case 2:
          return "撤回";
          break;
        case 3:
          return "确认";
          break;
      }
    },
  },
  methods: {
    handleSizeChange(){
      this.$emit('handleSizeChange',val)
    },
    handlePageChange(val) {
      this.$emit("handlePageChange", val);
    },
    handleQueryClick(val) {
      this.$emit("handleQueryClick", val);
    },
    handleExport(val) {
      this.$emit("handleExport", val);
    },
    handleOptions(val,index) {
      this.$emit("handleOptions", {key:val,index:index});
    },
  },
};
</script>
<style  lang="less">
.ivu-page-item-active {
  background: #d00000;
  border: 0;
  a {
    color: #fff;
  }
  &:hover {
    a {
      color: #fff;
    }
  }
}
</style>
